<template>
  <ul class="friend-circle scroll" v-infinite-scroll="load">
    <template v-if="circleCount > 0">
      <li :class="{'circle-itme':currentCircles[i-1]}" v-for="(i, index) in count" :key="index">
        <template v-if="currentCircles[i-1]">
          <!-- 文本 -->
          <div
            class="circle-div circle-text"
            v-if="currentCircles[i-1].Content.Text"
            v-text="currentCircles[i-1].Content.Text"
          ></div>
          <!-- 链接 -->
          <div
            class="circle-div circle-link"
            v-if="currentCircles[i-1].Content.Link"
            @click="openLink(currentCircles[i-1])"
            title="点击打开链接"
          >
            <img
              v-if="currentCircles[i-1].Content.Images"
              :src="currentCircles[i-1].Content.Images[0].ThumbImg"
              alt="这是link"
            />
            <span class="circle-link-description" v-else v-text="'无效链接'"></span>
            <span
              class="circle-link-description"
              v-text="currentCircles[i-1].Content.Link.Description"
            ></span>
          </div>
          <!-- 图片 -->
          <div class="circle-div circle-img" v-else-if="currentCircles[i-1].Content.Images">
            <div
              class="img-div"
              v-for="(img, index) in currentCircles[i-1].Content.Images"
              :key="index"
            >
              <img v-if="img.ThumbImg" :src="img.ThumbImg" alt="图片地址错误" />
              <img
                v-else
                :src="img.ThumbImg"
                alt="点击获取缩略图"
                @click="pullCircleDetailTask(currentCircles[i-1])"
              />
            </div>
          </div>
          <!-- 视频 -->
          <div class="circle-div circle-video" v-else-if="currentCircles[i-1].Content.Video">
            <video class="video" controls>
              <source :src="currentCircles[i-1].Content.Video.Url" type="video/mp4" />
            </video>
          </div>

          <!-- 点赞、评论、删除 -->
          <div class="circle-div time-operation">
            <!-- 时间 -->
            <span v-text="$options.filters.timeFilter(currentCircles[i-1].PublishTime)"></span>
            <!-- 操作 -->
            <div>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-star-off"
                @click="likeCircle(currentCircles[i-1])"
              >点赞</el-button>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
                @click="circleCommentReplyTask(currentCircles[i-1])"
              >评论</el-button>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-refresh"
                @click="triggerCirclePushTask(currentCircles[i-1])"
              >刷新</el-button>
            </div>
          </div>

          <!-- 显示好友点赞 -->
          <div class="circle-div likes-box" v-if="currentCircles[i-1].Likes">
            <i class="fa fa-heart-o" aria-hidden="true"></i>
            <div>
              <div v-for="(like, index) in currentCircles[i-1].Likes" :key="index">
                <img
                  :src="currentfriendsMap[like.FriendId] ? currentfriendsMap[like.FriendId].Avatar : require('assets/svg/conversation-image-error.svg')"
                />
              </div>
            </div>
          </div>

          <!-- 显示好友评论 -->
          <div class="circle-div comment-box" v-if="currentCircles[i-1].Comments">
            <div
              class="every-comment"
              v-for="(comment, index) in currentCircles[i-1].Comments"
              :key="index"
            >
              <img
                :src="currentfriendsMap[comment.FromWeChatId] ? currentfriendsMap[comment.FromWeChatId].Avatar : require('assets/svg/conversation-image-error.svg')"
              />

              <div class="comment-info">
                <div class="name-time">
                  <span
                    class="ellipsis"
                    v-text="currentfriendsMap[comment.FromWeChatId] ? currentfriendsMap[comment.FromWeChatId].FriendNick:comment.FromWeChatId"
                  ></span>
                  <span v-text="$options.filters.timeFilter(comment.PublishTime)"></span>
                </div>

                <div class="reply-1">
                  <div class="reply-to-friend" :title="comment.Content">
                    <span v-if="comment.ToWeChatId">
                      回复
                      <span
                        class="reply-friend-name"
                        v-text="currentfriendsMap[comment.ToWeChatId] ? currentfriendsMap[comment.ToWeChatId].FriendNick:comment.ToWeChatId"
                      ></span>
                      :
                    </span>
                    <span class="comment-content" v-text="comment.Content"></span>
                  </div>

                  <i
                    v-if="comment.FromWeChatId === currentFriend.WeChatId"
                    class="fa fa-trash"
                    aria-hidden="true"
                    title="删除"
                    @click="circleCommentDeleteTask(currentCircles[i-1],comment)"
                  ></i>
                  <i
                    v-else
                    class="fa fa-reply"
                    aria-hidden="true"
                    title="回复"
                    @click="circleCommentReplyTask(currentCircles[i-1],comment)"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </template>
      </li>
      <li class="li-loading" v-if="loading">
        <i class="el-icon-loading"></i>加载中...
      </li>
      <li class="li-btn" v-if="noMore">
        <el-button
          :loading="pullFriendCircle"
          :disabled="pullFriendCircle"
          style="margin:10px;"
          size="small"
          type="primary"
          @click="getMore"
        >获取更多</el-button>
      </li>
    </template>
    <li class="get-btn" v-else>
      <el-button
        :loading="pullFriendCircle"
        :disabled="pullFriendCircle"
        type="primary"
        @click="getMore"
      >获取朋友圈</el-button>
    </li>
  </ul>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'FriendCircle',
  data() {
    return {
      loading: false,
      count: 5, // 默认显示几行
      pullFriendCircle: false,
    }
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    },
  },
  computed: {
    ...mapGetters({
      friendsMap: 'nedb/friendsMap',
      currentCircles: 'nedb/conversationCircles',
    }),
    // 好友id-信息对照
    currentfriendsMap() {
      let wechatId = this.currentFriend.WeChatId
      if (wechatId && this.friendsMap[wechatId]) {
        return this.friendsMap[wechatId]
      }
      return {}
    },
    // 朋友圈的数量
    circleCount() {
      return this.currentCircles.length
    },
    // 没有数据
    noMore() {
      return this.count >= this.circleCount
    },
  },
  methods: {
    // 显示更多的数据
    load() {
      if (this.count < this.circleCount && !this.loading) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.count++
        }, 1000);
      } else {
        if (this.count === this.circleCount) {
          this.$message.info('点击按钮获取更多')
        }
      }
    },
    // 获取更多的朋友圈
    getMore() {
      this.pullFriendCircle = true
      let length = this.currentCircles.length
      let publishTime = length > 0 ? this.currentCircles[length - 1].PublishTime : 0
      let pullMsg = {
        wechatId: this.currentFriend.WeChatId,
        friendId: this.currentFriend.FriendId,
        startTime: Number(publishTime),
        count: 5
      }
      this.$store.dispatch('websocket/PullFriendCircleTask', pullMsg)
      setTimeout(() => {
        this.pullFriendCircle = false
      }, 8000);
    },
    // 朋友圈连接 ok
    openLink(circle) {
      let url = circle.Content.Link.Url
      var a = document.createElement('a');
      a.setAttribute('href', url);
      a.setAttribute('target', '_blank');
      a.setAttribute('id', 'js_a');
      //防止反复添加
      if (document.getElementById('js_a')) {
        document.body.removeChild(document.getElementById('js_a'));
      }
      document.body.appendChild(a);
      a.click();
    },
    // =====================================================================
    // 点赞 ok
    likeCircle(circle) {
      let msg = {}
      for (const key in circle) {
        if (circle.hasOwnProperty(key)) {
          msg[key] = circle[key]
        }
      }
      msg['WeChatId'] = this.currentFriend.WeChatId
      msg['FriendId'] = circle.WeChatId

      this.$store.dispatch('websocket/CircleLikeTask', msg)
      this.$message.info('点赞任务已发出！')
    },
    // 刷新指定朋友圈 ok
    triggerCirclePushTask(circle) {
      this.$message.info('任务已经下发!')
      let msg = {}
      for (const key in circle) {
        if (circle.hasOwnProperty(key)) {
          msg[key] = circle[key]
        }
      }
      msg['WeChatId'] = this.currentFriend.WeChatId
      msg['FriendId'] = circle.WeChatId
      this.$store.dispatch('websocket/TriggerCirclePushTask', msg)
    },
    // 评论 ok
    circleCommentReplyTask(circle, comment) {
      let msg = {}
      for (const key in circle) {
        if (circle.hasOwnProperty(key)) {
          msg[key] = circle[key]
        }
      }
      msg['WeChatId'] = this.currentFriend.WeChatId
      msg['FriendId'] = circle.WeChatId


      if (comment) {
        msg.currentComment = comment
      }
      this.$prompt('请输入评论内容', '评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,500}/,
        inputErrorMessage: '评论字数1-500'
      }).then(({ value }) => {
        this.$message.info('任务已经下发！')
        msg.value = value
        this.$store.dispatch('websocket/CircleCommentReplyTask', msg)
      }).catch(() => {
        this.$message.info('取消任务！')
      });
    },
    // 删除评论 ok
    circleCommentDeleteTask(circle, comment) {
      let msg = {}
      for (const key in circle) {
        if (circle.hasOwnProperty(key)) {
          msg[key] = circle[key]
        }
      }
      msg['WeChatId'] = this.currentFriend.WeChatId
      msg['FriendId'] = circle.WeChatId
      if (comment) {
        msg.currentComment = comment
      }
      this.$confirm('确认删除该评论 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('websocket/CircleCommentDeleteTask', msg)
        this.$message.info('已提交任务')
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    // 获取缩略图 ok
    pullCircleDetailTask(circle) {
      let msg = {}
      for (const key in circle) {
        if (circle.hasOwnProperty(key)) {
          msg[key] = circle[key]
        }
      }
      msg['WeChatId'] = this.currentFriend.WeChatId
      msg['FriendId'] = circle.WeChatId
      this.$store.dispatch('websocket/PullCircleDetailTask', msg)
      this.$message.info('任务已经下发!')
    },
  },
  created() {
    // 查询朋友圈
    this.$store.dispatch('nedb/SetConversationCircles', this.currentFriend)
  }
}
</script>



<style lang="scss" scoped>
.friend-circle {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;

  .circle-itme {
    margin-top: 10px;
    border-bottom: #dcdfe6 solid 1px;

    .circle-div {
      width: 98%;
      margin-left: 1%;
      font-size: 16px;
    }

    .circle-text {
      line-height: 30px;
    }

    .circle-img {
      width: 80%;
      margin-left: 10%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      .img-div {
        width: 30%;
        min-width: 30%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba($color: #000000, $alpha: 0.3);
        margin: 10px auto;
        img {
          max-width: 90%;
          max-height: 90%;
          min-height: 90%;
          cursor: pointer;
        }
      }
    }

    .circle-video {
      width: 98%;
      display: flex;
      justify-content: center;
      .video {
        width: auto;
        height: auto;
        min-width: 30%;
        max-width: 80%;
        max-height: 300px;
      }
    }

    .circle-link {
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 100px;
        height: 100px;
      }
      .circle-link-description {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        font-weight: 900;
        margin-left: 10px;
        margin-right: 10px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .time-operation {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .likes-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: white;
      position: relative;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      i {
        font-size: 20px;
        color: red;
        margin-right: 5px;
        margin-left: 5px;
      }
      & > div {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        div {
          display: flex;
          flex-wrap: wrap;
          span {
            font-size: 14px;
            line-height: 30px;
          }
          img {
            height: 30px;
            width: 30px;
            margin: 5px 5px;
            transition: all 0.6s;
            cursor: pointer;
            &:hover {
              transform: scale(2);
            }
          }
        }
      }
      &::before {
        content: "";
        border: 8px solid transparent;
        border-bottom: 8px solid white;
        position: absolute;
        top: -16px;
        left: 16px;
      }
    }

    .comment-box {
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      .every-comment {
        background: white;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 1px;
        img {
          height: 30px;
          width: 30px;
          margin: 5px 5px;
          text-align: center;
          cursor: pointer;
          &:hover {
            transform: scale(3);
          }
        }
        .comment-info {
          flex: 1 1 auto;
          overflow: hidden;
          .name-time {
            display: flex;
            justify-content: space-between;
            span:nth-child(1) {
              font-size: 12px;
              width: 80%;
              display: inline-block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #5c6f98;
            }
            span:nth-child(2) {
              font-size: 12px;
              width: 20%;
              text-align: center;
              color: gray;
            }
          }
          .reply-1 {
            flex: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .reply-to-friend {
              display: flex;
              cursor: pointer;
              width: 90%;
              overflow: hidden;
              font-size: 13px;
              line-height: 20px;
              .comment-content {
                // flex: auto;
                // display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .reply-friend-name {
                color: #4bbcfb;
              }
            }
            i {
              width: 10%;
              text-align: center;
              color: gray;
              font-size: 16px;
              cursor: pointer;
              &:hover {
                color: #4bbcfb;
              }
            }
          }
        }
      }
    }
  }

  .li-loading {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #409eff;
  }
  .li-btn {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    // border: solid red 1px;
    // color: #409eff;
  }
  .get-btn {
    align-self: center;
    margin: auto;
  }
}
</style>
